<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>毕业设计选题系统</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>

    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/ready.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/element-ui.css}">

    <style>
        td {
            text-align: center
        }
    </style>
</head>
<body>
<div class="wrapper" id="app">
    <div th:replace="student/public-student-index :: header"></div>
    <div th:replace="student/public-student-index :: left"></div>

    <div class="main-panel">
        <div class="content">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <span style="text-align:center;display:block;font-size:25px">修改密码</span>
                    <form action="#" id="changepassword" method="post">
                        <strong>请输入当前密码:</strong><input type="password" class="form-control" id="oldpassword" name="oldpassword"><br/>
                        <strong>请输入新密码:<span style="color: red">(密码长度6-16位 由字母和数字构成)</span>
                        </strong>&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" class="form-control"
                                                                               id="newpassword" name="newpassword"><br/>
                        <strong>请确认新密码:</strong>&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" class="form-control"
                                                                               id="newpassword1" name="newpassword1"><br/><br/>
                        <button type="button" style="float:right;" class="btn btn-primary" name="success" @click="success" id="success">
                            确认修改
                        </button>
                    </form>
                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </div>


</div>


</body>
<script type="text/javascript" th:src="@{/webjars/jquery/1.9.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/Vue.js}"></script>
<script type="text/javascript" th:src="@{/js/element-ui.js}"></script>
<!--<script type="text/javascript" th:src="@{/asserts/js/ready.min.js}"></script>-->
<script th:inline="javascript" type="text/javascript">

    var basePath= /*[[${#httpServletRequest.getContextPath()}]]*/'ContextPath' ;

    var app = new Vue({
        el:"#app",
        methods:{
            success:function () {
                    $.ajax({
                        //几个参数需要注意一下
                        type: "PUT",//方法类型
                        //dataType: "json",//预期服务器返回的数据类型
                        url: basePath+'/student/changepassword',//url
                        data: $('#changepassword').serialize(),
                        success: function (data) {
                            if (data == 200) {
                                window.location.href =basePath+ "/student/exit";
                                alert("修改成功");
                            }
                            if (data == 201) {
                                // alert("对不起密码错误!");
                                app.prompt2();
                            }
                            if (data == 202) {
                                // alert("对不起输入框为空!");
                                app.prompt3();
                            }
                            if (data == 203) {
                                // alert("新密码不一致!");
                                app.prompt4();
                            }
                            if (data == 204) {
                                // alert("修改失败");
                                app.prompt5();
                            }
                            if (data == 205){
                                app.prompt6();
                            }
                            if (data == 206){
                                app.prompt7();
                            }
                        }
                    });
            },

            prompt2(){
                this.$notify.info({
                    title: '修改失败',
                    message: '当前密码错误!'
                });
            },
            prompt3(){
                this.$notify.info({
                    title: '修改失败',
                    message: '输入框为空！'
                });
            },
            prompt4(){
                this.$notify.info({
                    title: '修改失败',
                    message: '新密码不一致！'
                });
            },
            prompt5(){
                this.$notify.error({
                    title: '提示',
                    message: '修改失败！'
                });
            },
            prompt6(){
                this.$notify.info({
                    title: '修改失败',
                    message: '旧密码与新密码一样！'
                });
            },
            prompt7(){
                this.$notify.info({
                    title: '密码格式错误',
                    message: '密码长度错误或是含有特殊字符！'
                });
            }
        }
    })
</script>
</html>